<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const activeIndex = ref('1')
const activeMenuItem = ref(0);

const menuItems = [
  { index: 2, label: '智能监控', url: '/monitor' },
  { index: 3, label: '资产管理',  url: '/property'},
  { index: 4, label: '告警中心',  url: '/alarm' },
  { index: 5, label: '数据报表',  url: '/report' },
  { index: 6, label: '智能发现',  url: '/intelligent' }
];

const sliderStyle = ref({});
onMounted(() => {
  // const selectedItem = menuItems[activeMenuItem.value];
  // console.log(selectedItem)
  // const itemEl = document.querySelector(`[data-index="${selectedItem.index}"]`);
  // if (itemEl) {
  //   updateSliderStyle(itemEl);
  // }
});

watch(activeMenuItem, (newValue) => {
  console.log(activeMenuItem.value, newValue);
  let selectedItem;
  let itemEl;
  if (newValue) {
    selectedItem = menuItems[newValue - 1];
    itemEl = document.querySelector(`[data-index="${selectedItem.index}"]`);
  } else {
    selectedItem = menuItems[newValue];
    itemEl = document.querySelector(`[data-index="1"]`);
  }
  if (itemEl) {
    updateSliderStyle(itemEl);
  }
});

const handleMenuItemClick = (index) => {
  activeMenuItem.value = index;
};

const updateSliderStyle = (itemEl) => {
  console.log(itemEl, activeMenuItem.value)
  if (activeMenuItem.value) {
    sliderStyle.value = {
      width: `${itemEl.offsetWidth}px`,
      height: `${itemEl.offsetHeight}px`,
      transform: `translateX(${itemEl.offsetLeft}px)`
    };
  } else {
    sliderStyle.value = {
      display: 'none'
    };
  }
};

</script>

<template>
  <div class="header-menu-wrapper">
    <el-menu class="header-menu" role="tablist" mode="horizontal" v-model="activeMenuItem" :defaultActive="activeIndex">
      <div class="menu-slider" :style="sliderStyle"></div>
      <el-menu-item @click="handleMenuItemClick(0)" index="1" data-index="1" class="menu-home"><router-link to="/">首页</router-link></el-menu-item>
      <el-menu-item
        @click="handleMenuItemClick(index + 1)"
        v-for="(item, index) in menuItems"
        :data-index="item.index"
        :index="item.index"
        :key="item.index"
      >
        <router-link :to="item.url ? item.url : '/'">{{ item.label }}</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped lang="stylus">
.header-menu {
    height: 40px;
    width: 1000px;
    background: none;
    vertical-align: middle;
  }
  .header-menu .menu-home {
    width: 103px;
    height: 20px;
    border-right: 1px solid rgba(255, 255, 255, 1);
    position: relative;
    margin: 10px 2px;
    padding-left: 27px;
    font-size: 16px;
    border-bottom: none;
    &::after {
      content: '';
      position: absolute;
      left: 18px;
      top: 2px;
      width: 17px;
      height: 17px;
      background: url('@/assets/home/home_icon.png') no-repeat;
    }
  }
  .header-menu {
    border-bottom: none;
  }
  .header-menu :deep(li) {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 252, 252, 1);
    font-family: SourceHanSansCN-Regular;
    padding: 7px;
    height: 30px;
    margin: 5px 12px;
    a {
      font-weight: 300;
    }
  }
  .header-menu :deep(li.is-active),
  .header-menu :deep(li:hover) {
    color: rgba(69, 69, 69, 1) !important;
    border-radius: 5px;
    font-family: SourceHanSansCN-Bold;
    font-weight: 500;
    border-bottom: none;
    a {
      font-weight: 500;
      outline: none;
    }
  }
  .header-menu :deep(.menu-home.is-active),
  .header-menu :deep(.menu-home:hover) {
    background: none;
    border-radius: 0;
    border-bottom: none;
    font-weight: 500;
    color: rgba(255, 252, 252, 1) !important;
    font-size: 18px;
  }
  .header-menu :deep(li a:hover) {
    background: none;
  }


.menu-slider {
  position: absolute;
  bottom: 5px;
  left: 0;
  border-radius: 5px;
  background-color: rgba(227, 246, 248, 1); /* 选中背景色 */
  transition: transform 0.3s ease-in-out; /* 过渡效果 */
}
</style>
